<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/basic/marketList">市场管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>市场详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <el-row :gutter="20" class="common-height">
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">区域编码：{{categoryForm.areaSn}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">市场名称：{{categoryForm.marketName}}</div>
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple text-left"
          >市场类型：{{categoryForm.marketType==1?'一级市场':'二级市场'}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">标签：{{categoryForm.tags}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="common-height">
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">描述：{{categoryForm.description}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">电话：{{categoryForm.phone}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">备注：{{categoryForm.remarks}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple text-left">标注位置：{{categoryForm.address}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="common-height">
        <el-col :span="24">
          <div class="grid-content bg-purple text-left flex">
            <span>图片列表：</span>
            <div
              v-if="categoryForm.photoList"
              class="thumbUrl"
              v-for="(item,index) in categoryForm.photoList"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item.picUrl"
                :preview-src-list="[item.picUrl]"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { getDetail } from "@/api/crm/marketmanage";
export default {
  data() {
    return {
      categoryForm: {
        photoList: [],
        position: ""
        // marketType:[{
        //   value: '1',
        //   label:'一级市场'
        // },
        // {
        //   value: '2',
        //   label:'二级市场'
        // }]
      }

      // position:{
      //   formattedAddress:'',
      //   addressComponent:{
      //     city:'',
      //     district:'',
      //     province:'',
      //     township:''
      //   },
      //   longitude:'',
      //   latitude:''
      // },
    };
  },
  // created() {
  //   this.init();
  // },
   beforeRouteEnter(to, from, next) {
    next(vm => vm.init(vm.$route.query.res.marketSn));
  },
  methods: {
    init(marketSn) {
      let params = {
        marketSn: marketSn
      };
      // params.marketSn = JSON.parse(this.$route.query.res).marketSn;
      getDetail(params).then(res => {
        console.log(res);

        this.categoryForm = res.data.data;
        // this.position.formattedAddress = res.data.data.address
        // this.position.addressComponent.province = res.data.data.province
        // this.position.addressComponent.city = res.data.data.city
        // this.position.addressComponent.district = res.data.data.district
        // this.position.addressComponent.township = res.data.data.street
        // let tmp =  res.data.data.position.split(',');
        // this.lnglat = {P: Number(tmp[1]),R:Number(tmp[0])}
      });
    }
  }
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}
.text-left {
  text-align: left;
  margin-left: 10px;
}
.crumbs {
  margin: 20px 10px;
}
.thumbUrl {
  display: inline-block;
}
</style>


